<template>
  <view class="viewpoint">
    <!-- 轮播 -->
    <view class="swiper">
      <swiper
        indicator-dots
        autoplay
        circular
        :interval="2000"
        indicator-active-color="#f04142"
        indicator-color="rgba(140, 140, 140, .3)"
      >
        <swiper-item>
          <image src="../../static/images/swiper-1.png" mode="scaleToFill" />
        </swiper-item>
        <swiper-item>
          <image src="../../static/images/swiper-2.jpeg" mode="scaleToFill" />
        </swiper-item>
        <swiper-item>
          <image src="../../static/images/swiper-3.png" mode="scaleToFill" />
        </swiper-item>
        <swiper-item>
          <image src="../../static/images/swiper_4.jpg" mode="scaleToFill" />
        </swiper-item>
      </swiper>
    </view>
    <!-- 热度最高 -->
    <view class="tophot">
      <view class="H2">今日热度最高</view>
      <view class="hot-contain">
        <view class="hot-item" v-for="item in hotList_h" :key="item.newsId" @tap="todetail(item)">
          <view class="img"><image :src="item.newsImgArr[0]" /></view>
          <view class="tit">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 大家都在看 -->
    <view class="abundansee">
      <view class="title">大家都在看</view>
      <scroll-view scroll-y>
        <!-- 滚动区域 -->
        <view class="see-item" v-for="item in hotList_s" :key="item.newsId" @tap="todetail(item)">
          <!-- 图片 -->
          <view class="see-img">
            <image :src="item.newsImgArr[0]" />
          </view>
          <view class="see-info">
            <!-- 用户名 -->
            <view class="see-username">
              <text style="font-size: 28rpx">{{ item.author }}</text>
              <text class="iconfont icon-gengduo"></text>
            </view>
            <!-- 标题 -->
            <view class="see-title">{{ item.title }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { hotAPI } from '@/services/news'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { hotItem } from '@/types/news'
const hotList_h = ref<hotItem[]>([])
const hotList_s = ref<hotItem[]>([])
const getHotlist = async () => {
  const res = await hotAPI()
  hotList_h.value = res.data.slice(0, 4)
  hotList_s.value = res.data.slice(4)
}
const todetail = (item: hotItem) => {
  uni.navigateTo({ url: `/pages/detail/detail?newsId=${item.newsId}` })
}
onLoad(() => {
  getHotlist()
})
</script>

<style lang="scss">
page {
  height: 100%;
}
.viewpoint {
  display: flex;
  flex-direction: column;
  height: 100%;
  .swiper {
    height: 300rpx;
  }
  .tophot {
    height: 300rpx;
    padding: 20rpx 20rpx;
    border-bottom: 1rpx solid #8f8e8e;
    .H2 {
      height: 45rpx;
      line-height: 45rpx;
      font-size: 32rpx;
      font-weight: bold;
    }
    .hot-contain {
      height: 220rpx;
      display: flex;
      justify-content: space-between;
      .hot-item {
        height: 210rpx;
        margin-top: 10rpx;
        width: 160rpx;
        .img {
          width: 100%;
          height: 160rpx;
          border-radius: 20rpx;
          overflow: hidden;
        }
        .tit {
          height: 50rpx;
          width: 100%;
          font-size: 24rpx;
          line-height: 50rpx;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .abundansee {
    height: calc(100vh - 645rpx);
    padding: 20rpx 20rpx 0 20rpx;
    .title {
      height: 45rpx;
      line-height: 45rpx;
      font-size: 32rpx;
      font-weight: bold;
    }
    .see-item {
      margin-top: 10rpx;
      height: 150rpx;
      padding: 10rpx 0;
      display: flex;
      .see-img {
        height: 100%;
        width: 130rpx;
        border-radius: 20rpx;
        overflow: hidden;
      }
      .see-info {
        flex: 1;
        padding-left: 15rpx;
        .see-username {
          height: 45rpx;
          display: flex;
          justify-content: space-between;
        }
        .see-title {
          height: 80rpx;
          font-size: 32rpx;
          line-height: 80rpx;
          color: #000;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>